<template>
    <div class="bg-[#000]! text-white! md:px-10! md:text-[16px]!">
        <div class="md:max-w-[90%]! lg:max-w-[1400px]! sm:max-w-[90%]! max-w-[90%]! mx-auto md:mt-[36px]">
            <v-row no-gutters class="px-5! py-5 sm:px-0! ">
                <v-col cols="12" sm="12" md="2"
                    class="pb-2 mb-2 border-b-green-300  border-b-1 border-b-solid sm:border-b-0!">
                    <img src="/66.webp" alt="" srcset="" class="w-[130px] h-[auto] md:w-[200px] relative -left-[5px]">
                    <div class="text-3 md:text-4">
                        <div class="mb-1"> Contact us</div>
                        <div class="mb-1"> NICE PATCHES Technologies</div>
                        <div class="mb-1"> Call: 151 6037 2830</div>
                        <div class="mb-1"> www.nicepatches.com</div>
                        <div class="mb-1"> Email: sales@nicepatches.com</div>
                        <div> Sales Manager: lisa</div>
                    </div>
                    <div class="flex my-2">
                        <div
                            class="w-[35px]! h-[35px]! md:w-[40px]! md:h-[40px]! rounded-[100%] bg-[#fff] overflow-hidden flex justiyf-center items-center mr-2 ">
                            <Icons name="icon-facebook" class="w-[45px]! h-[45px]!" />
                        </div>
                        <div
                            class="w-[35px]! h-[35px]! md:w-[40px]! md:h-[40px]! rounded-[100%] bg-[#fff] overflow-hidden flex justiyf-center items-center mr-2">
                            <Icons name="icon-NGpinqu" class="w-[50px]! h-[50px]!" />
                        </div>
                        <div
                            class="w-[35px]! h-[35px]! md:w-[40px]! md:h-[40px]! rounded-[100%] bg-[#fff] overflow-hidden flex justiyf-center items-center mr-2">
                            <Icons name="icon-tuite1" class="w-[45px]! h-[45px]!" />
                        </div>
                        <div
                            class="w-[35px]! h-[35px]! md:w-[40px]! md:h-[40px]! rounded-[100%] bg-[#fff] overflow-hidden flex justiyf-center items-center mr-2">
                            <Icons name="icon-instagram" class="w-[40px]! h-[40px]!" />
                        </div>
                    </div>
                </v-col>
                <v-col cols="12" sm="12" md="4" lg="6"
                    class="pb-2 mb-2 border-b-green-300  border-b-1 border-b-solid sm:border-b-0!">
                    <div class="md:px-20">
                        <div class="flex justify-between text-4 md:text-5 mb-1 font-bold!">
                            <span>Our Products</span>
                            <span>Shop</span>
                            <span>About Us</span>
                        </div>
                        <div class="flex justify-between text-3 md:text-4 mb-1 text-left!">
                            <span>Our Products</span>
                            <span>Shop</span>
                            <span class="text-left">About Us</span>
                        </div>
                        <div class="flex justify-between text-3 md:text-4 mb-1 text-left!">
                            <span>Our Products</span>
                            <span>Shop</span>
                            <span class="text-left">About Us</span>
                        </div>
                        <div class="flex justify-between text-3 md:text-4 mb-1 text-left!">
                            <span>Our Products</span>
                            <span>Shop</span>
                            <span class="text-left">About Us</span>
                        </div>
                        <div class="flex justify-between text-3 md:text-4  mb-1 text-left!">
                            <span>Our Products</span>
                            <span>Shop</span>
                            <span class="text-left">About Us</span>
                        </div>
                    </div>
                </v-col>
                <v-col cols="12" sm="12" md="4" class="md:text-[16px]!">
                    <div class="flex justify-between text-4 md:text-5 mb-1 md:font-bold!">
                        Sign up and save
                    </div>
                    <div class="text-3 md:text-4">
                        Subscribe to receive <span class="text-green text-4 font-bold">40% off</span> your order!
                        no code needed.
                    </div>
                    <div class="flex justify-center h-10 my-2">
                        <EmailInput />
                    </div>
                    <div class="text-3 text-green-500">
                        <i class="iconfont icon-required text-[red] text-2 md:text-3 mr-[1px]"></i> Please enter your
                        emai!
                    </div>
                    <div class="text-3 md:text-4">
                        You have successfully subscribed to our newsletter.
                    </div>
                </v-col>
            </v-row>
            <div
                class="flex border-b-green-300  border-b-1 border-b-solid mx-4 pb-2 mb-4 text-3 md:text-4 items-center">
                <div>Terms & Conditions </div><i class="iconfont icon-anjianfengexian text-green"></i>
                <div>Privacy Policy </div><i class="iconfont icon-anjianfengexian text-green"></i>
                <div>Sitemap</div>
            </div>
            <div class="mx-4 flex justify-between flex-wrap sm:px-10 max-md:hidden">
                <div class="">
                    <img src="/pinpai/amex.png" class="w-[70px] h-auot" alt="PayPal icon">
                </div>
                <div class="">
                    <img src="/pinpai/BBB.png" class="w-[70px] h-auot" alt="Discover icon">
                </div>
                <div class="">
                    <img src="/pinpai/DHL  a1.png" class="w-[70px] h-auot" alt="Amex icon">
                </div>
                <div class="">
                    <img src="/pinpai/Discover.png" class="w-[70px] h-auot" alt="SSL icon">
                </div>
                <div class="">
                    <img src="/pinpai/fedex  A1.png" class="w-[70px] h-auot" alt="AuthorizeNet icon">
                </div>
                <div class="">
                    <img src="/pinpai/Mastercard  A6.png" class="w-[70px] h-auot" alt="DHL icon">
                </div>
                <div class="">
                    <img src="/pinpai/PayPal a1.png" class="w-[70px] h-auot" alt="US postal service icon">
                </div>
                <div class="">
                    <img src="/pinpai/SSL.png" class="w-[70px] h-auot" alt="US postal service icon">
                </div>
                <div class="">
                    <img src="/pinpai/trustpilot A1.png" class="w-[70px] h-auot" alt="US postal service icon">
                </div>
                <div class="">
                    <img src="/pinpai/USPS A1.png" class="w-[70px] h-auot" alt="US postal service icon">
                </div>
                <div class="">
                    <img src="/pinpai/visa A1.png" class="w-[70px] h-auot" alt="US postal service icon">
                </div>
            </div>
            <div class="text-center text-3 my-4">
                <span class="text-blue">Copyright @ 1992 -2025 NICE PATCHES</span>. All rights reserved.
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { Icons } from "@/components/icons";
import { EmailInput } from "@/components/EmailInput";
</script>

<style>
.asd {
    overflow: hidden;
}
</style>